<template>
  <div class="webHeader">
    <div class="container">
      <div class="nav">
        <div class="nav-left">
          <router-link to="/home/webHomepage">首页</router-link>
          <router-link v-if="isLogin" to="/home/myhomepage"
            >我的主页</router-link
          >
          <router-link to="/home/moment">此刻</router-link>
        </div>
        <div class="nav-right">
          <router-link v-if="isLogin" to="/home/diary">写日记</router-link>
          <router-link v-if="isLogin" class="smallSize" to="/home/set/userset"
            >设置</router-link
          >
          <router-link v-if="!isLogin" to="/home/reg">注册</router-link>
          <router-link v-if="!isLogin" to="/home/login">登录</router-link>
          <a
            @click="myExit"
            v-if="isLogin"
            class="smallSize"
            href="javascript:;"
            >退出</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "compHeader",
  data() {
    return {};
  },
  methods: {
    myExit() {
      this.$store.state.isLogin = false;
      this.$store.state.noLogin = false;
      this.$router.push({ path: "/home/webHomepage" });
      let _data = document.cookie;
      // console.log(_data);
      if (_data.length == 0) {
        return false;
      }
      document.cookie = "isCheck=; expires=" + new Date("1970/01/01");
    },
  },
  computed: {
    ...mapState(["isLogin"]),
  },
};
</script>

<style lang="less" scoped>
.webHeader {
  width: 100%;
  height: 45px;
  background-color: #34495e;
  .nav {
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    a {
      color: #d5d5d5;
      font-weight: bold;
      margin: 10px;
      &:hover {
        color: white;
      }
    }
    .smallSize {
      font-size: 14px;
    }
  }
}
</style>